<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World!</title>
</head>
<body>
    
<h1>
<span>K</span>
<span>r</span>
<span>i</span>
<span>n</span>
<span>a</span>
<span>!</span>

</h1>


</body>
<style>
body{
    background: #a855f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}
span{
    position: relative;
    font-family: 'Lato', sans-serif;
    top:20px;
    color:white;
    font-size: 5rem;
    text-shadow: 0 1px 0 #b7b7b7,0 2px 0 #b7b7b7,0 3px 0 #b7b7b7,0 4px 0 #b7b7b7,0 5px 0 #b7b7b7,0 6px 0 transparent,0 7px 0 transparent,0 8px 0 transparent,0 9px 0 transparent,0 10px 10px rgba(0,0,0,0.5);
    animation: bounce 0.4s ease infinite alternate;
}
h1 span:nth-child(2) {
    animation-delay: 0.1s;
}
h1 span:nth-child(3) {
    animation-delay: 0.2s;
}
h1 span:nth-child(4) {
    animation-delay: 0.3s;
}
h1 span:nth-child(5) {
    animation-delay: 0.4s;
}
h1 span:nth-child(6) {
    animation-delay: 0.5s;
}
@keyframes bounce {
   100% {
        top: -20px;
        text-shadow:0 1px 0 #ccc,0 2px 0 #ccc,0 3px 0 #ccc,0 4px 0 #ccc,0 5px 0 #ccc,0 6px 0 #ccc,0 7px 0 #ccc,0 8px 0 #ccc,0 9px 0 #ccc,0,60px 30px rgba(0,0,0,0.3);
    }
}
</style>

</html>
